<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script>
			let a = {
				b: {
					c: 1
				}
			}
			
			/**
			 * 作战目标：自动监听对象的子对象值变动，并输出回调函数
			 * 例如：
			 * a.b.c = 2;
			 * console.log('a.b.c' + '已更改，值为' + '2');
			 * 详情请看控制台输出
			 */
		
			objectEach(a, function(key, newValue) {
				console.log(key + '已更改，值为' + newValue);
			})
			
			function objectEach(obj, cb) {
				for(var key in obj) {
					def(obj, key, obj[key], cb);
					if(obj[key] instanceof Object) {
						objectEach(obj[key], cb);
					}
				}
			}
			
			function def(obj, key, value, cb) {
				Object.defineProperty(obj, key, {
					get: function() { 
						return value; 
					},
					set: function(newValue) { 
						value = newValue;
						cb && cb(key, newValue);
					},
					enumerable: true,
					configurable: true
				});
			}
			
			let logValue1, logValue2;
			
			a.b.c = 3;
			alert(JSON.stringify(a));
			
			a.b = 2;
			alert(JSON.stringify(a));
				
			// 关于对象a的托管问题，可以像vue实例一样把所有对象都添加到data的子属性，就可以监听a属性了
			
		</script>
		
	</body>
</html>
